<template>
  <!-- 额度占用情况环图 -->
  <div class="businessMngChartPage">
    <div class="chartBox" id="businessTypeChartId"></div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { changeNumToWan } from "../../utils/handelScreen";
import echarts from "@/common/utils/echarts.js";

const businessTypeChartRef = ref(null);

const xDataArr = ref([
  "文体",
  "医疗",
  "养老",
  "领川",
  "教育",
  "文创传媒",
  "体育场馆",
]);
const leftIncomeDataArr = ref([]);
const rightExpendDataArr = ref([]);
const options = reactive({
  color: ["#3C96FF", "#29F0FF"],
  // timeline: {
  //   show: false,
  // },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
    backgroundColor: "rgba(255,255,255,0.75)",
    extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
    textStyle: {
      fontSize: 14,
      color: "#000",
    },
    formatter: "{a}<br/>{b} :\n\n{c} 个",
  },
  legend: {
    top: -2,
    right: "center",
    itemWidth: 16,
    itemHeight: 6,
    itemGap: 20,
    icon: "horizontal",
    textStyle: {
      color: "#D3E3FF",
      fontSize: 12,
    },
    data: ["收入", "支出"],
  },
  grid: [
    // 左边
    {
      show: false,
      left: "10%",
      top: "5%",
      bottom: "5%",
      containLabel: true,
      width: "40%",
    },
    // 中间
    {
      show: false,
      left: "5%",
      top: "5%",
      bottom: "5%",
      width: "0%",
    },
    // 右边
    {
      show: false,
      left: "50%",
      top: "5%",
      bottom: "5%",
      containLabel: true,
      width: "40%",
    },
  ],
  xAxis: [
    {
      type: "value",
      inverse: true,
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        verticalAlign: "middle",
        textStyle: {
          color: "#ADBBD8",
          fontSize: 12,
        },
        margin: 0
      },
      splitLine: {
        show: false,
      },
    },
    {
      gridIndex: 1,
      show: false,
    },
    {
      gridIndex: 2,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        verticalAlign: "middle",
        textStyle: {
          color: "#ADBBD8",
          fontSize: 12,
        },
        margin: 0
      },
      splitLine: {
        show: false,
      },
    },
  ],
  yAxis: [
    {
      type: "category",
      inverse: false,
      position: "right",
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#555555",
        },
      },
      axisTick: {
        show: false,
      },
      data: xDataArr.value,
    },
    {
      gridIndex: 1,
      type: "category",
      inverse: false,
      position: "left",
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        color: "#D3E3FF",
        fontSize: 12,
        align: "left",
      },
      data: xDataArr.value.map(function (value) {
        return {
          value: value,
          textStyle: {
            align: "center",
          },
        };
      }),
    },
    {
      gridIndex: 2,
      type: "category",
      inverse: false,
      position: "left",
      axisLine: {
        show: true,
        lineStyle: {
          color: "#555555",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      data: xDataArr.value,
    },
  ],
  series: [
    {
      name: "1",
      type: "bar",
      barWidth: 10,
      stack: "1",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: "rgba(25,120,229,0.1)",
          },
          {
            offset: 1,
            color: "rgba(60,150,255,0.6)",
          },
        ]),
      },
      label: {
        show: true,
        position: "left",
        color: "#3C96FF",
      },
      data: [],
      animationEasing: "elasticOut",
    },
    {
      name: "2",
      type: "bar",
      stack: "2",
      barWidth: 10,
      xAxisIndex: 2,
      yAxisIndex: 2,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: "rgba(41,240,255,0.6)",
          },
          {
            offset: 1,
            color: "rgba(0,197,231,0.1)",
          },
        ]),
      },
      label: {
        show: true,
        position: "right",
        color: "#29F0FF",
      },
      data: [],
      animationEasing: "elasticOut",
    },
  ],
});

// 调用接口
const initChartOption = (leftIncome, rightExpend) => {
  let legendDataArr = ["收入", "支出"];
  leftIncomeDataArr.value = [3, 20, 122, 134, 55, 65, 42];
  rightExpendDataArr.value = [11, 38, 23, 139, 66, 66, 86];
  options.legend.data = legendDataArr;
  options.series[0].name = legendDataArr[0];
  options.series[0].data = leftIncome;
  options.series[1].name = legendDataArr[1];
  options.series[1].data = rightExpend;
  businessTypeChartRef.value.setOption(options);
};
// 在父组件中调用
const initBusinessTypeChart = (leftIncome, rightExpend) => {
  // 基于准备好的dom，初始化echarts实例
  businessTypeChartRef.value = echarts.init(
    document.getElementById("businessTypeChartId")
  );
  initChartOption(leftIncome, rightExpend);
  return businessTypeChartRef.value
};

defineExpose({
  initBusinessTypeChart,
});
</script>

<style lang="scss" scoped>
.businessMngChartPage {
  width: 100%;
  height: 100%;
  .chartBox {
    width: 100%;
    height: 100%;
  }
}
</style>
